<!-- 公共打印 -->

<template>
  <div :class="`CommonPrint CommonPrint-${layout}`">
    <div v-for="i in rows" :key="i">
      <div v-for="j in cols" :key="j">
        <component :is="CORE.keyPre(type, 'Item')" v-if="check(i, j)" :item="list[trans(i, j)]" />
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// 集中导入样式，以免其他项目引用 @print/CommonPrint 中的组件时带入了样式
const imports = require.context('./', true, /index\.scss/)
imports.keys().forEach((path) => imports(path))

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'CommonPrint',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: {
    type: { type: String, default: 'base' }, // 打印类型
    layout: { type: String, default: '1' }, // 每页布局的个数
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 列表
     */
    list() {
      const key = `PRINT_${this.type.toUpperCase()}`
      return JSON.parse(sessionStorage[key] || '[]')
    },

    /**
     * 列数
     */
    cols() {
      const { layout } = this
      const COLS = {
        1: 1,
        3: 1,
        6: 2,
        12: 2,
        24: 3,
        44: 4,
      }
      return COLS[layout] || 1
    },

    /**
     * 行数
     */
    rows() {
      const { list: { length }, cols } = this
      const rest = length % cols // 余数
      return (length - rest) / cols + (rest ? 1 : 0)
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    if (this.list.length) window.print()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 转换
     */
    trans(i, j) {
      const { cols } = this
      return cols * (i - 1) + j - 1
    },

    /**
     * 校验
     */
    check(i, j) {
      const { trans, list: { length } } = this
      return trans(i, j) < length
    },
  },
}
</script>
